<template>
    <div id="wrapper">
        <div class="top">
            <top/>
        </div>
        <div class="content">
            <div
                class="content-left"
                :class="{'hide-nav':hideNav}"
            >
                <div class="content-left-wrap">
                    <navbar/>
                </div>
                <div
                    class="icon-group"
                    @click="toggleNav"
                >
                    <i v-if="hideNav" class="el-icon-d-arrow-right"></i>
                    <i v-else class="el-icon-d-arrow-left"></i>
                </div>
            </div>
            <div class="content-right">
                <router-view />
            </div>
        </div>
        <!-- <top/>
        <div class="navbar">
            <div class="fl"><navbar/></div>
            <div class="fl mian"><router-view /></div>
        </div> -->
    </div>
</template>

<script>
    import Top from "@/components/Top.vue";
	import Navbar from "@/components/NavToBar.vue";
    export default {
        components: {
		    Top,
            Navbar,

        },
        data() {
            return {
                hideNav:false,
            }
        },
        mounted () {

        },
        methods: {
            toggleNav(){
                this.hideNav = !this.hideNav;
            },
        },
    };
</script>
<style lang="scss">
@import '../assets/css/main.scss';
#wrapper{
    height:100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .top{
        height:60px;
        min-height: 60px;
    }
    .content{
        display: flex;
        height:calc(100% - 60px);
        .content-left{
            position: relative;
            transition: .5s;
            width: 190px;
            min-width: 190px;
            background: #001529;
            .content-left-wrap{
                overflow: hidden;
            }
            .icon-group{
                position: absolute;
                top:50%;
                transform: translate(0px, -50%);
                right: -16px;
                background: #001529;
                padding:2px;
                i{
                    color:#fff;
                    font-size: 12px;
                    animation:mymove 5s infinite;
                    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
                }
            }
        }
        .hide-nav{
            min-width: 0;
            width:0;
        }
        .content-right{
            width:100%;
            padding:40px 70px;
            overflow-y:auto;
        }
    }
    @keyframes mymove
    {
        from {
            transform: translate(0,0);
        }
        to {
            transform: translate(-2px,0);
        }
    }

    @-webkit-keyframes mymove /*Safari and Chrome*/
    {
        from {
            transform: translate(0,0);
        }
        to {
            transform: translate(-2px,0);
        }
    }
}
</style>

